<template>
  <view class="container">
    <!-- 状态栏占位 -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <!-- #endif -->
    
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <image src="/static/Images/notice/Fanhui.png" class="back-icon"></image>
      </view>
      <view class="title">站内短信</view>
      <view class="placeholder"></view>
    </view>
    
    <!-- 消息列表 -->
    <view class="message-list">
      <view class="message-item" v-for="(item, index) in messageList" :key="index" @click="viewDetail(item)">
        <view class="message-content">
          <view class="message-time">{{ item.time }}</view>
          <view class="message-title">{{ item.title }}</view>
          <rich-text class="message-desc" :nodes="item.description"></rich-text>
          <view class="view-detail">
            <text class="detail-text">查看详情</text>
            <image src="/static/Images/notice/Qianjin.png" class="arrow-icon"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { indexApi } from '@/utils/api'
import { userStorage } from '@/utils/storage'

export default {
  data() {
    return {
      // 状态栏高度
      statusBarHeight: 0,
      messageList: [],
      page: 1,
      size: 10,
      loading: false
    }
  },
  onLoad() {
    // #ifdef MP-WEIXIN
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()
    // 获取胶囊按钮信息
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    // 计算状态栏高度
    this.statusBarHeight = systemInfo.statusBarHeight + (menuButtonInfo.top - systemInfo.statusBarHeight) + menuButtonInfo.height + 10
    // #endif
    
    this.getNoticeList()
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: '/pages/notice/index'
      })
    },
    async viewDetail(item) {
      try {
        // 只有当消息未读时（is_read === 0）才调用setNoticeRead接口
        if (item.is_read === 0) {
          // 获取token
          const token = userStorage.getToken()
          
          // 调用setNoticeRead接口标记为已读
          await indexApi.setNoticeRead({
            token: token,
            notice_id: item.id
          })
          
          console.log('消息已标记为已读:', item.id)
        } else {
          console.log('消息已是已读状态，跳过setNoticeRead调用:', item.id)
        }
        
        // 跳转到详情页
        uni.navigateTo({
          url: `/pages/notice/textdetail?id=${item.id}`
        })
      } catch (error) {
        console.error('标记消息已读失败:', error)
        // 即使标记已读失败，也要跳转到详情页
        uni.navigateTo({
          url: `/pages/notice/textdetail?id=${item.id}`
        })
      }
    },
    async getNoticeList() {
      if (this.loading) return
      
      try {
        this.loading = true
        const response = await indexApi.getNoticeList(2, this.page, this.size)
        
        if (response && response.data) {
          this.messageList = response.data.map(item => ({
            time: item.created_at || item.time,
            title: item.title || '新奖励达成通知',
            description: item.content || item.description,
            is_read: item.is_read, // 保存原始的 is_read 状态
            id: item.id
          }))
        }
      } catch (error) {
        console.error('获取站内短信列表失败:', error)
        uni.showToast({
          title: '获取消息列表失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
/* 状态栏样式 */
.status-bar {
  width: 100%;
  background: linear-gradient(180deg, #FF7B80 0%, rgba(244,234,234,0) 100%);
}

.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44px 16px 16px 16px;
  background-color: #ffffff;
  position: relative;
}

.back-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 20px;
  height: 20px;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.placeholder {
  width: 24px;
  height: 24px;
}

.message-list {
  padding: 10px 16px;
}

.message-item {
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.message-content {
  position: relative;
}

.message-time {
  font-size: 14px;
  color: #999999;
  text-align: center;
  margin-bottom: 12px;
}

.message-title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 8px;
}

.message-desc {
  font-size: 14px;
  color: #666666;
  line-height: 1.4;
  margin-bottom: 12px;
}

.view-detail {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.detail-text {
  font-size: 14px;
  color: #ff4444;
  text-decoration: underline;
  margin-right: 4px;
}

.arrow-icon {
  width: 16px;
  height: 16px;
}
</style>